<template>
  <div class="datacard">
    <el-card class="boxcard">
      <div class="container">
        <div class="charts">
          <pie-chart :title="{ title: { text: 'PIS指数', subtext: '23%' } }" />
          <pie-chart :title="{ title: { text: 'CPK', subtext: '9.12' } }" />
        </div>
        <div class="details">
          <div class="detail">
            <strong>线别：</strong>{{ lineName }}
          </div>
          <div class="detail">
            <strong>设备名称：</strong>{{ item ? item.name : "" }}
          </div>
          <div class="detail"><strong>产品名称：</strong>80*100印制板</div>
          <div class="detail"><strong>工艺名称：</strong>xxx炉温工艺</div>
          <div class="detail"><strong>合格率：</strong>96.2%</div>
          <div class="detail"><strong>DPPM：</strong>3262</div>
          <div class="detail">
            <strong>开始时间：</strong>2020/02/24 16:12:10
          </div>
          <div class="detail">
            <strong>结束时间：</strong>2020/02/24 20:12:10
          </div>
        </div>
        <div class="machine">
          <img class="img" src="../../../assets/images/equip.png" />
          <div class="status"><span />运行</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import PieChart from "./PieChart";

export default {
  name: "DataCard",
  components: { PieChart },
  props: {
    spaces: {
      type: Array,
      default() {
        return [];
      },
    },
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      lineName: '空间'
    };
  },
  watch: {},
  created() {
    if (this.spaces && this.spaces.length > 0) {
      this.spaces.forEach(e => {
        if (e.key == this.item.spaceID) {
          this.lineName = e.label;
        }
      });
    }
  },
  beforeDestroy() {},
  methods: {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.datacard {
  width: 100%;

  .boxcard {
    margin-bottom: 30px;

    .container {
      display: flex;
      flex-direction: row;

      .charts {
        display: flex;
        flex-direction: row;
      }

      .details {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        .detail {
          height: 45px;
          width: auto;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
        }
      }

      .machine {
        .img {
          height: 150px;
          width: 100%;
        }
        .status {
          text-align: center;
          height: auto;

          span {
            display: inline-block;
            background: red;
            border-radius: 50%;
            margin-right: 10px;
            width: 10px;
            height: 10px;
          }
        }
      }

      div {
        flex: 1;
        height: 200px;
      }
    }
  }
}
</style>
